<template>
	<div class="function-manage">
		<div class="tool-bar cc-flex flex-h-between">
			<el-button type="primary" @click="editFunction(false)">新增功能</el-button>
			<div>
				<el-form-item label="功能名称">
					<el-input v-model="filterText"></el-input>
				</el-form-item>
			</div>
		</div>
		<div class="tree-content">
			<el-tree
				ref="treeRef"
				:filter-node-method="filterNode"
				:props="treeProps"
				:data="treeData"
				node-key="id"
				default-expand-all
				:expand-on-click-node="false"
			>
				<template #default="{ data }">
					<div class="cc-flex node-item">
						<div class="title flex-h-100">
							{{ data.name }}<span class="type">{{ ` (${EFunctionTypeList.find(f => f.value == data.type)?.name})` }}</span>
						</div>
						<div class="tip cc-flex flex-0">
							<div class="offline tip-item flex-0">{{ data.code }}</div>
						</div>
						<div class="btns flex-0">
							<a class="add" v-if="data.type != EFunctionType.button" @click="editFunction(true, data)"> 添加子级 </a>
							<a class="edit" @click="editFunction(false, data)"> 编辑 </a>
							<a v-if="!data.children || !data.children.length" class="delete" @click="removeFunction(data)"> 删除 </a>
						</div>
					</div>
				</template>
			</el-tree>
		</div>

		<!-- 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getFunctionTree"></add-or-update>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue'
import { MFunction, EFunctionType, EFunctionTypeList, PermissionService } from '@/modules/permission'
import AddOrUpdate from './function-edit.vue'
import { ElTree, ElMessageBox } from 'element-plus'

const treeProps = {
	label: 'name',
	children: 'children'
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const treeData = ref<MFunction[]>([])
const addOrUpdateRef = ref()

onMounted(() => {
	getFunctionTree()
})

watch(filterText, val => {
	treeRef.value!.filter(val)
})

const filterNode = (value: string, data: any, child: any) => {
	if (!value) return true
	return data.name.includes(value)
}

function getFunctionTree() {
	PermissionService.getFunctionTree().then((res: any) => {
		treeData.value = res
	})
}

async function editFunction(isAppend: boolean, data?: MFunction) {
	addOrUpdateRef.value.init(isAppend, data)
}
function removeFunction(data: MFunction) {
	ElMessageBox.confirm(`确定要删除 [ ${data.name} ] 区域吗？`, '提示', {
		type: 'warning'
	}).then(() => {
		if (data.id)
			PermissionService.deleteFunctionItem(data.id).then(() => {
				getFunctionTree()
			})
	})
}
</script>

<style scoped lang="scss">
.function-manage {
	.tool-bar {
		padding: 18px;
		padding-bottom: 0px;
		background-color: #eee;
	}
	.tree-content {
		margin-top: 15px;
		:deep(.el-tree-node__content) {
			height: 36px !important;
			border-bottom: 1px solid #f1f1f1;
		}
		.node-item {
			width: 100%;
			.tip {
				width: 600px;
				.title {
					color: #888;
				}
			}
			.type {
				color: #aaa;
			}
			.btns {
				width: 250px;
				.add,
				.edit {
					color: var(--el-color-primary);
				}

				.delete {
					color: orangered;
				}
				a {
					padding-right: 10px;
				}
			}
		}
	}
}
</style>
